<button class="task-view-pane-close" onclick="return close_task();"><i class="fa fa-chevron-right"></i></button>

<div class="px-2 my-2" style="margin-left: 24px;">

    <!-- 标题 -->
    <div class="d-flex">
        <h4 class="text-truncate" style="max-width: 580px">{{task.info.name}}</h4>

        {% if #task.info.tags > 0 then %}
        <small class="ml-2 mt-1" style="font-size: 12px; vertical-align: middle;">
            {% for _, tag in ipairs(task.info.tags) do %}
            <span class="badge {{tags[tag].color}} mr-1">{{tags[tag].title}}</span>
            {% end %}
        </small>
        {% end %}
    </div>
    
    {% if enable_archive and task.info.status == 4 then %}
    <a href="#" class="btn-link" onclick="return archive('{{task.info.id}}');" style="position: absolute; right: 1em; top: .5em;"><i class="fa fa-archive mr-1"></i>验收任务</a>
    {% end %}
    <hr class="mx-0 mt-0 mb-1">

    <!-- 状态栏 -->
    <div class="d-flex">

        <!-- 指派 -->
        <div>
            <div class="px-2">
                <i class="fa fa-hand-o-right mr-1"></i>{{task.info.assigned_name}}
            </div>
        </div>

        <!-- 测试 -->
        <div>
            <div class="px-2">
                <i class="fa fa-bug mr-1"></i>{{task.info.cooperator_name}}
            </div>
        </div>

        <!-- 优先级 -->
        <div>
            <div class="px-2">
                <i class="fa fa-tag mr-1"></i>{{weights[task.info.weight].title}}
            </div>
        </div>

        <!-- 时间 -->
        <div>
            <div class="px-2">
                <i class="fa fa-calendar mr-1"></i>{{string.format('%d月%d日 - %d月%d日', task.info.start_time.month, task.info.start_time.day, task.info.end_time.month, task.info.end_time.day)}}
            </div>
        </div>
        
        <!-- 状态 -->
        <div>
            <div class="px-2">
                {% if task.info.status == 1 then %}
                <i class="fa fa-circle-o mr-1"></i>待办中
                {% elseif task.info.status == 2 then %}
                <i class="fa fa-dot-circle-o mr-1"></i>开发中
                {% elseif task.info.status == 3 then %}
                <i class="fa fa-exclamation-circle mr-1"></i>测试中
                {% elseif task.info.status == 4 then %}
                <i class="fa fa-check-circle mr-1"></i>已完成
                {% else %}                
                <i class="fa fa-archive mr-1"></i>已归档
                {% end %}
            </div>
        </div>
    </div>
    <hr class="mt-2">
</div>

<!-- 任务信息 -->
<div class="task-detail-info-pane mt-4" editing-comment="false">

    <!-- 附件 -->
    {% if #task.attachments > 0 then %}
    <div class="mt-1 mb-4">
        <span>附件：</span>  
        {% for _, info in ipairs(task.attachments or {}) do %}
        <small class="border p-1 mr-2">
            <a href="{{info.url}}">
                <i class="fa fa-paperclip mr-1"></i>{{info.name}}
            </a>
        </small>
        {% end %}
    </div>
    {% end %}

    <!-- 任务描述 -->
    <div id="task-content-preview" style="min-height: 250px;">{{task.info.content}}</div>

    <!-- 任务评论及动态 -->
    <div class="mt-4">
        <ul class="nav nav-tabs" id="task-addition-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="task-comment-tab" data-toggle="tab" href="#task-comment-pane" role="tab" aria-controls="task-comment-pane" aria-selected="true">评论</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="task-event-tab" data-toggle="tab" href="#task-event-pane" role="tab" aria-controls="task-event-pane" aria-selected="false">动态</a>
            </li>
        </ul>

        <div class="tab-content h-100">
            <!-- 评论分页 -->
            <div class="tab-pane show active" id="task-comment-pane" role="tabpanel" aria-labelledby="task-comment-tab">
                {% for _, info in ipairs(task.comments) do %}
                <div class="mt-2 border-bottom">
                    <div class="d-flex mb-2">
                        <img class="mt-1 mr-2 rounded-circle" src="{{info.user_avatar}}" width="40px" height="40px">
                        <div class="">
                            <b class="mt-0">{{info.user}}</b><br>
                            <small class="text-muted">
                                <i class="fa fa-clock-o mr-1"></i>{{tostring(info.timepoint)}}
                            </small>
                        </div>
                    </div>

                    {*info.comment*}
                </div>
                {% end %}
            </div>

            <!-- 事件分页 -->
            <div class="tab-pane pt-1" id="task-event-pane" role="tabpanel" aria-labelledby="task-event-tab">
                <ul class="p-2" style="list-style-type: none;font-size: .8em;">
                    {% for _, ev in ipairs(task.events) do %}
                    <li class="text-muted">
                        <i class="fa fa-calendar mr-1"></i><span class="mr-1">{{tostring(ev.timepoint)}}</span><b class="mr-1">{{ev.user}}</b>{{ev.event_desc}} 
                    </li>
                    {% end %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 底部评论工具 -->
<div class="task-comment-pane px-2" editing-comment="false">
    <input id="trigger-task-comment" type="text" class="form-control" placeholder="发表评论...">
    <div class="editing-pane pt-2">
        <textarea id="task-comment-input" data-provide="markdown" rows="10"
            data-savable="false"
            data-iconlibrary="fa"
            data-upload="/dashboard/files/upload"
            data-fullscreen = "{ enable: false }"
            data-footer='<div class="text-right"><button id="btn-close-edit" type="button" class="btn btn-sm btn-secondary mr-2" onclick="return end_comment(false);"><i class="fa fa-close"></i></button><button id="btn-save-content" type="button" class="btn btn-sm btn-primary" onclick="return end_comment(true);"><i class="fa fa-send-o"></i></button></div>'></textarea>
    </div>
</div>

<script>
var content = $('#task-content-preview').get(0).innerHTML;

$(document).ready(function() {
    $('#task-content-preview').empty();
    $('#task-content-preview').append('<div class="md-preview d-block mh-100">' + marked(content || '') + '</div>');
    PR.prettyPrint();
    $('.flowchart').each(function() {
        var elem = $(this);
        var diag = flowchart.parse(elem.text());
        elem.empty();
        diag.drawSVG(elem.get(0));
    });
});

$('#trigger-task-comment').focusin(function() {
    $('.task-comment-pane').attr('editing-comment', true);
    $('.task-detail-info-pane').attr('editing-comment', true);
    $('#task-comment-input').focus();
});

$('#task-comment-input').markdown();

function refresh_task_info() {
    open_task('{{task.info.id}}', true);
}

function archive(tid) {
    $.post('/dashboard/tasks/mod_status', {tid : tid, org_status: 4, new_status : 5}, refresh_task_info);
}

function end_comment(send) {
    if (send) {
        var comment = $('#task-comment-input').val();
        $.post('/dashboard/tasks/add_comment', { id: '{{task.info.id}}', comment: marked(comment || '') }, function(ret) {
            if (ret.ok) refresh_task_info();
        });
    }

    $('#task-comment-input').val('');
    $('.task-comment-pane').attr('editing-comment', false);
    $('.task-detail-info-pane').attr('editing-comment', false);
}

function del_comment(id) {
    $.post('/dashboard/tasks/del_comment', { id: id }, function(ret) {
        if (ret.ok) refresh_task_info();
    });
}

</script>